<template>
  <div>
    <transition name="fade">
      <div class="mask" @click="hidden" v-show="show"></div>
    </transition>
    <transition :name="position">
      <div class="con" :class="position" :style="styles" v-show="show">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    position: String,
    styles: Object,
  },

  data() {
    return {};
  },
  model: {
    prop: "show",
    event: "handler",
  },
  methods: {
    hidden() {
      this.$emit("handler", false);
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  background: #000;
  opacity: 0.5;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.con {
  width: 100%;
  height: 200px;
  background: #fff;
  position: fixed;
}
.top {
  top: 0;
  left: 0;
}
.right {
  right: 0;
  top: 0;
}
.left {
  left: 0;
  top: 0;
}
.bottom {
  bottom: 0;
  left: 0;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter-to,
.fade-leave {
  opacity: 0.5;
}

.left-enter,
.left-leave-to {
  // opacity: 0;
  left: -100%;
}
.left-enter-active,
.left-leave-active {
  transition: all 1s;
}
.left-enter-to,
.left-leave {
  // opacity: 0.5;
  left: 0;
}

.right-enter,
.right-leave-to {
  // opacity: 0;
  right: -100%;
}
.right-enter-active,
.right-leave-active {
  transition: all 1s;
}
.right-enter-to,
.right-leave {
  // opacity: 0.5;
  right: 0;
}

.top-enter,
.top-leave-to {
  // opacity: 0;
  top: -100%;
}
.top-enter-active,
.top-leave-active {
  transition: all 1s;
}
.top-enter-to,
.top-leave {
  // opacity: 0.5;
  top: 0;
}

.bottom-enter,
.bottom-leave-to {
  // opacity: 0;
  bottom: -100%;
}
.bottom-enter-active,
.bottom-leave-active {
  transition: all 1s;
}
.bottom-enter-to,
.bottom-leave {
  // opacity: 0.5;
  bottom: 0;
}
</style>
